<template>
  <view class="user-center">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info" @tap="handleLogin">
        <image 
          class="avatar" 
          :src="userInfo.avatar || '/static/images/default-avatar.png'" 
          mode="aspectFill"
        ></image>
        <view class="info">
          <text class="nickname">{{userInfo.nickname || '点击登录'}}</text>
          <text class="desc" v-if="userInfo.phone">{{userInfo.phone}}</text>
        </view>
      </view>
    </view>

    <!-- 我的房源相关 -->
    <view class="menu-card">
      <view class="card-title">我的房源</view>
      <view class="menu-grid">
        <view class="menu-item" v-for="(item, index) in houseMenus" :key="index" @tap="navigateTo(item.url)">
          <view class="number">{{item.number}}</view>
          <text class="label">{{item.label}}</text>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-card">
      <view class="menu-list">
        <view 
          class="menu-item" 
          v-for="(item, index) in functionMenus" 
          :key="index"
          @tap="navigateTo(item.url)"
        >
          <view class="item-content">
            <image class="icon" :src="item.icon" mode="aspectFit"></image>
            <text class="label">{{item.label}}</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" v-if="userInfo.isLogin" @tap="handleLogout">
      退出登录
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        isLogin: false,
        avatar: '',
        nickname: '',
        phone: ''
      },
      houseMenus: [
        { label: '我的收藏', number: 0, url: '/src/pages/user/favorite' },
        { label: '看房记录', number: 0, url: '/src/pages/user/view-history' },
        { label: '我的预约', number: 0, url: '/src/pages/user/appointments' }
      ],
      functionMenus: [
        { 
          label: '我的合同', 
          icon: '/static/images/user/contract.png',
          url: '/src/pages/user/contracts'
        },
        { 
          label: '房租账单', 
          icon: '/static/images/user/bill.png',
          url: '/src/pages/user/bills'
        },
        { 
          label: '我的评价', 
          icon: '/static/images/user/review.png',
          url: '/src/pages/user/reviews'
        },
        { 
          label: '设置', 
          icon: '/static/images/user/settings.png',
          url: '/src/pages/user/settings'
        }
      ]
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      // TODO: 从本地存储或服务器获取用户信息
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
      }
    },

    // 处理登录点击
    handleLogin() {
      if (!this.userInfo.isLogin) {
        uni.navigateTo({
          url: '/src/pages/user/login'
        })
      }
    },

    // 页面导航
    navigateTo(url) {
      if (!this.userInfo.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({ url })
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userInfo')
            this.userInfo = {
              isLogin: false,
              avatar: '',
              nickname: '',
              phone: ''
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.user-center {
  min-height: 100vh;
  background-color: @bg-color-grey;
  padding-bottom: @spacing-xl;
}

.user-card {
  background-color: @primary-color;
  padding: @spacing-xl @spacing-lg;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.2);
    }
    
    .info {
      margin-left: @spacing-lg;
      
      .nickname {
        font-size: @font-size-xl;
        color: #fff;
        font-weight: 500;
      }
      
      .desc {
        font-size: @font-size-sm;
        color: rgba(255, 255, 255, 0.8);
        margin-top: @spacing-xs;
      }
    }
  }
}

.menu-card {
  background-color: @bg-color;
  margin-top: @spacing-sm;
  padding: @spacing-lg;
  
  .card-title {
    font-size: @font-size-lg;
    color: @text-color;
    margin-bottom: @spacing-lg;
    font-weight: 500;
  }
}

.menu-grid {
  display: flex;
  justify-content: space-around;
  
  .menu-item {
    text-align: center;
    
    .number {
      font-size: 36rpx;
      color: @text-color;
      font-weight: bold;
    }
    
    .label {
      font-size: @font-size-sm;
      color: @text-color-light;
      margin-top: @spacing-xs;
    }
  }
}

.menu-list {
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: @spacing-lg 0;
    border-bottom: 1rpx solid @border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-content {
      display: flex;
      align-items: center;
      
      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: @spacing-md;
      }
      
      .label {
        font-size: @font-size-md;
        color: @text-color;
      }
    }
  }
}

.logout-btn {
  margin: @spacing-xl @spacing-lg;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: @bg-color;
  color: @error-color;
  font-size: @font-size-lg;
  border-radius: @border-radius-md;
}
</style> 